<template>
  <div class="container">
    <ul>
      <li>
        <img src="http://file.rzkeji.com/web/recruit/icon/telTag.png"/>
        <input type="tel" name="account" placeholder="请输入手机号码" v-model="tel">
      </li>
      <li>
        <img src="http://file.rzkeji.com/web/recruit/icon/codeTag.png"/>
        <input type="text" name="yan" placeholder="请输入验证码" v-model="yan">
        <div @click="flag &&getYan()" :class="{enabled:flag,disabled:!flag}">获取验证码<span v-if="time!=''">{{time}}s</span></div>
      </li>
      <div class="details">
        <div class="login" @click="register">绑定手机号码</div>
        <!-- <div class="goLogin"><navigator url="/pages/login/main" open-type="redirect">已有账号,立即登陆</navigator></div> -->
        <div class="login toHome" @click="toHome">返回首页</div>
      </div>
    </ul>
  </div>
</template>

<script>

export default {
  data () {
    return {
      tel:"",
      yan:"",
      time:"",
      timeInterval:"",
      flag:true
    }
  },

  components: {
  },
  onLoad(options){
    // console.log(options)
    // this.userToken=options.userToken
  },
  methods: {
    async getYan(){
      let res=await this.$request.postData('/auth/sendVerificationCode',{phone:this.tel});
      if(res.data.level!='success'){
           this.$currency.showToast(res.data.message,'none',1500);
           return
        }
        this.flag=false;
        this.time=60;
        this.$currency.showToast(res.data.message,'success',1500)
        this.timeInterval=setInterval(()=>{
          this.time--;
          if(this.time<0){
            this.time="";
            this.flag=true;
            this.$currency.showToast('可请重新发送验证信息','none',1500);
            clearInterval(this.timeInterval)
          }
        },1000)
    },
    async register(){
      var userToken=wx.getStorageSync('userToken') 
      let res=await this.$request.postData('/auth/bindingPhone',{phone:this.tel,verify_phone:this.yan,user_token:userToken});
      if(res.data.level=="success"){
        let toPageUrl = wx.getStorageSync('toPage')
        if (toPageUrl != '') {
          wx.removeStorageSync('toPage')
          wx.redirectTo({
            url: toPageUrl
          })
          
        } else {
          this.$currency.switchTab("/pages/home/main")
        }
      }else{
        this.$currency.showToast(res.data.message,'none',3000)
      }
    },
    toHome(){
      this.$currency.switchTab('/pages/home/main')
    }
  },
  onUnload(){
    clearTimeout(this.timeInterval)
  }
}
</script>

<style scoped>
.container{color: #666666;background-color: #F8F8FB}
ul li{width: 100%;height: 52px;display: flex;justify-content: row;border-bottom:1px solid #F8F8FB;margin-bottom: 1px;background-color: #fff;}
ul li img{width: 26px;height: 26px;margin-top: 12px;margin-left: 20px;}
ul li div{width: 120px;height: 40px;margin-top: 6px;color: #666;border: 1px solid rgba(0,0,0,0.2);font-size: 15px;line-height: 40px;text-align: center;border-radius: 5px;font-weight: 600;}
ul li:nth-of-type(2) input{width: 200px;}
ul li input{width: 250px;height: 26px;margin-top: 12px;margin-left: 20px;}
ul li:nth-of-type(4){margin-bottom: 0px;}
.tip{width: 100%;height: 52px;}
.tip input{margin-left: 20px;}
.tip span{line-height: 52px;}
.tip span:nth-of-type(2){float: right;margin-right: 20px;}
.login{width: 340px;background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);margin-left: 17.5px;height: 50px;line-height: 50px;color: #fff;border-radius: 5px;font-size: 20px;text-align: center;}
.goLogin{width: 140px;height: 40px;margin: 10px auto;text-align: center;line-height: 40px;color: #0180cf;font-size: 15px;}
.details{padding-top: 10px;background-color: #fff;}

.disabled{
    background: #eee;
  }
.enabled{
  color:#fff!important;
  background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%);
}
.toHome{
  margin-top:20px;
}
</style>
